<template>
  <div>
    <Search />
    <div class="shop-wrap">
      <ul class="shop-wrap-ul" v-if="shopList.total">
        <li class="shop-wrap-ul-li" v-for="(item, index) in shopList.data" :key="index">

          <div class="shop-street-liitem">
            <div class="shop-street-liitem-left">
              <!-- :style="{backgroundImage:'url('+item.logo+')'}" -->
              <div class="shop-street-liitem-left-content">
                <img :src="item.logo" />
                <h3>{{ item.shop_name }}</h3>
                <p>{{ $t('好评率') }}{{item.praise_lv}}%</p>
                <p>{{item.deal_num}}{{ $t('人已抢') }}</p>
                <span @click="merchantShop(item)">{{ $t('进店逛逛') }}</span>
              </div>
              <div class="shop-street-liitem-left-bgimg">
                <img :src="item.logo">
              </div>
              <div class="shop-street-liitem-left-gray"></div>
            </div>

            <div class="shop-street-liitem-right" v-if="item.goodres.length != 0">
              <div class="shop-street-liitem-right-goodsitem" v-for="(itemk, indexk) in item.goodres" :key="indexk"
                @click="goGoodsDeatil(itemk.id)">
                <img :src="itemk.thumb_url" />
                <p class="shop-street-liitem-right-goodsitem-title"><span>{{ itemk.goods_name }}</span></p>
                <p class="shop-street-liitem-right-goodsitem-spaniconprice">
                  <span>￥</span>
                  <span class="shop-street-liitem-right-goodsitem-price">{{ itemk.min_price }}</span>
                </p>
              </div>
            </div>
            <Empty size="100" v-else />

          </div>

        </li>
      </ul>
      <Empty v-else />
      <div class="coupon-page" v-if="shopList.total">
        <Page :total="shopList.total" :page-size="shopList.per_page" @on-change="pageChange"></Page>
      </div>
    </div>

    <Spin size="large" fix v-if="isLoading"></Spin>
  </div>
</template>

<script>
import { Search } from '@/components';
import { mapState } from "vuex";
import {goGoodsDeatil} from "@/common/utils"
export default {
  name:'ShopStreet',
    metaInfo:{
      title: '优趣联盟系统',
  },
  data(){
    return{
      page:1,
      shopList:{}
    }
  },
  computed: {
    ...mapState(["asItems", "isLoading","searchKey"]),
  },
  components:{
    Search
  },
  created() {
    this.getShopList();
  },
  methods:{
    goGoodsDeatil,
    //店铺列表
    getShopList(){
      this.$http.getShopList({
        page:this.page,
      }).then(res => {
        if (res.status === 200) {
          this.shopList = res.data;
          console.log(this.shopList);
        } else {
          this.$Message.error(mess);
        }
      })
    },

    merchantShop(item){
      this.$router.push({
        path: "/merchant",
        query: { shop_id: item.id }
      })
    },

    pageChange(page){
      this.page = page;
      this.getShopList();
    }
  }

}
</script>

<style lang="scss" scoped>
.shop {
  &-wrap {
    width: 1200px;
    margin: 0 auto;

    &-ul {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 30px;

      &-li {
        width: 585px;
        background-color: #fff;
        margin-bottom: 30px;
      }
    }

    .coupon-page {
      padding: 40px 0;
      text-align: center;
    }

  }
}

.shop-street-liitem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;

  &-left {
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    background-size: cover;
    width: 180px;
    height: 230px;
    margin: 0 auto;

    &-content {
      width: 100px;
      margin: 0 auto;
      text-align: center;
      color: #fff;
      line-height: 25px;
      margin-top: 40px;
      position: absolute;
      z-index: 1000;
      left: 40px;

      img {
        border: none;
        width: 60px;
        height: 60px;
      }

      h3 {
        font-weight: 700;
      }

      p {
        opacity: .7
      }

      span {
        border: 1px solid #fff;
        padding: 0px 10px;
        display: inline-block;
        margin-top: 5px;
        cursor: pointer;
      }
    }

    &-bgimg {
      position: absolute;
      z-index: 1;
      -webkit-filter: blur(5px);
      filter: blur(15px);
      transform: scale(1.2);

      img {
        width: 180px;
        height: 230px;
      }
    }

    &-gray {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      background: rgba(0, 0, 0, .2);
      z-index: -1;
      opacity: 0.5;
    }
  }

  &-right {
    width: 405px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-right: 15px;

    &-goodsitem {
      width: 128px;
      cursor: pointer;

      img {
        width: 112px;
        height: 112px;
      }

      &-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      margin-top:40px;
      padding-left:15px;

      &-spaniconprice {
        color: #f00;
        text-align: center;
      }

      &-price {
        font-weight: bold;
      }
    }
  }
}</style>
